<template>
	<div class="coverage" v-if="showState">
		<div class="top" v-if="xiangxi">
			<div class="title">{{xiangxi.title}}
			<div class="revert"  v-on:click="changexq"></div>
			</div>
			<div class="main">
				<div class="img"><img :src="xiangxi.thumb"/></div>
				<div class="text">
					<div class="txttitle">评分</div>
					<div class="txtmain">{{xiangxi.detail.title}}</div>
					<div class="txtbottom">
						<div class="btimg"><img src="../../img/imgtitle.png"/></div>
						<div class="bttxt">音乐宗师</div>
						<div class="dashang">打赏</div>
					</div>
					
				</div>
				
			</div>
			<div class="allbottom">
				<div class="bochild shoucang">收藏</div>
				<div class="bochild fenxiang">分享</div>
				<div class="bochild xiazai">批量下载</div>
			</div>
		</div>
		<div class="xiamian">
			<div class="xiatitle">
				<div class="jiemu">节目</div>
				<div class="tuijian">推荐</div>
			</div>
			<div class="listtitle">
				<div class="periods">101期</div>
				<div class="xuanji">选集</div>
				<div class="paixu">排序</div>
			</div>
			<div class="list">
				<div class="listleft">
				<div class="listtop">班得瑞conmfdsd-haha-dsd</div>
				<div class="listbottom">
					<div class="time">2017-01-01</div>
					<div class="bofang">1228.6万</div>
					<div class="shichang">3:35</div>
				</div>
				</div>
				<div class="right"></div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return{
				xiangxi:''
			}
		},
		computed: {
			showState(){
				// 获取仓库当中的状态值
				return this.$store.state.xqState;
			},
			sid(){
				return this.$store.state.detail;
			}
		},
		methods:{
			changexq(){
				this.$store.commit('changeXq');
			}
		},
		mounted(){
			this.$watch('sid',function(a){
				if(a){
			this.xiangxi=a;
//			console.log(a);
				}
			})
		}
	}
</script>

<style scoped>
	.coverage{
		width: 100%;
		height: auto;
		position: absolute;
		z-index: 99999;
		
	}
	.top{
		width: 100%;
		height: 6.873913rem;
		background-color: #2e323b;
	}
	.title{
		/*width: 100%;*/
		height: 1.304347rem;
		line-height: 1.304347rem; 
		padding-left: 0.869565rem;
		text-align: center;
		font-size: 0.47826rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #fff;
		position: relative;
	}
	.revert{
		width: 0.434782rem;
		height: 0.652173rem;
		position: absolute;
		top: 0.34rem;
		left: 0.434782rem;
		background: url(../../img/zyzjt.png) center center no-repeat;
		background-size: 100%;
		

	}
	.main{
		width: 100%;
		height: 3.65217rem;
		display: flex;
		color: #fff;
	}
	.img{
		padding: 0.2rem  0.434782rem  0.434782rem  0.434782rem;
		width: 3.243478rem;
		height: 3.043478rem;
	}
	.img img{
		width: 100%;
		height: 100%;
	}
	.text{
		width: 5.913043rem;
		height: 100%;
	}
	.txttitle{
		width: 100%;
		height: 0.869565rem;
		line-height:  0.869565rem;
		font-size: 0.391304rem;
		margin-top: 0.108695rem;
	}
	.txtmain{
		width: 100%;
		height: 0.889565rem;
		line-height: 0.434782rem;
		font-size: 0.304347rem;
		overflow : hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.txtbottom{
		width: 100%;
		height: 0.956521rem;
		margin-top: 0.217391rem;
		position: relative;
		display: flex;
		align-items: center;

	}
	.btimg{
		width:0.956521rem;
		height: 0.956521rem;
		display: flex;
		align-items: center;
	}
	.btimg img{
		width: 60%;
		height: 60%;
	} 
	.bttxt{
		width: 2.630434rem;
		height: 0.956521rem;
		line-height:0.956521rem;
	}
	.dashang{
		width: 1.95652rem;
		position: absolute;
		height: 0.673913rem;
		line-height: 0.673913rem;
		border: solid 0.021739rem #8792a8;
		border-radius: 0.434782rem;
		padding-left: 0.834782rem;
		background: url(../../img/dashang.png) 10% 70% no-repeat;
		background-size: 25%;
		right: 0 ;
		bottom: 0.108695rem;
	}
	.allbottom{
		width: 100%;
		height: 1.586956rem;
		display: flex;
		color: #fff;
	}
	.bochild{
		width:33%;
		text-align: center;
		padding-top: 0.986956rem;
	}
	.shoucang{
		background: url(../../img/shoucang.png) center 10% no-repeat;
		background-size: 25%;
	}
	.fenxiang{
		background: url(../../img/fengxiang.png) center 10% no-repeat;
		background-size: 25%;
	}
	.xiazai{
		background: url(../../img/xiazai.png) center 10% no-repeat;
		background-size: 25%;
	}
	.xiamian{
		width: 100%;
		height: 10.8030434rem;
		background-color: #fff;
	}
	.xiatitle{
		width: 10rem;
		height: 0.956521rem;
		/*background-color: red;*/
		display: flex;
	}
	.jiemu{
		width: 50%;
		height: 0.956521rem;
		line-height: 0.956521rem;
		color: #a94a48;
		border-bottom: solid 0.065217rem #a94a48;
		text-align: center;
	}
	.tuijian{
		width: 50%;
		height: 0.956521rem;
		line-height: 0.956521rem;
		text-align: center;
	}
	.listtitle{
		width: 100%;
		height: 1.086956rem;
		background-color: #f5f5f7;
		display: flex;
	}
	.periods{
		padding-left: 0.434782rem;
		width: 6.921739rem;
		height: 1.086956rem;
		line-height: 1.086956rem;
		color: #a1a2a6;
	}
	.xuanji{
		width: 1.23913rem;
		height: 1.086956rem;
		line-height: 1.086956rem;
		padding-left: 0.752173rem;
		background: url(../../img/xuanji.png) 10% center no-repeat;
		background-size: 25%;
			}
	.paixu{
		width: 1.23913rem;
		height: 1.086956rem;
		padding-left: 0.752173rem;
		line-height: 1.086956rem;
		background: url(../../img/paixu.png) 10% center no-repeat;
		background-size: 25%;
	}
	.list{
		/*width: 100%;*/
		padding-left: 0.652173rem;
		height: 1.695652rem;
		background-color:  #f5f5f7;
		position: relative;
		/*display: flex;*/
	}
	.listtop{
		width: 70%;
		height:0.913043rem;
		font-size: 0.391304rem;
		line-height: 0.913043rem;
		
	}
	.listbottom{
		width: 70%;
		height:0.613043rem;
		line-height: 0.613043rem;
		display: flex;
	}
	.time{
		width: 1.956521rem;
		height:0.613043rem;
		line-height: 0.613043rem;
		font-size: 0.290869rem;
	}
	.bofang{
		width: 1.869565rem;
		height:0.613043rem;
		line-height: 0.613043rem;
		padding-left: 0.869565rem;
			font-size: 0.290869rem;
		background: url(../../img/bofang.png) 10% center no-repeat;
		background-size: 20%;
	}
	.shichang{
		width: 1rem;
		height:0.613043rem;
		line-height: 0.613043rem;
		padding-left: 0.869565rem;
		font-size: 0.290869rem;
		background: url(../../img/shichang.png) 10% center no-repeat;
		background-size: 20%;
	}
	.right{
		width: 0.652173rem;
		height:  0.652173rem;
		background: url(../../img/xiazai2.png) center center no-repeat;
		background-size: 100%;
		position: absolute;
		right: 0.652173rem;
		top: 0.452173rem;
	}
</style>